<template>
    <el-popover
        :width="420"
        :offset="5"
        :hide-after="0"
        placement="bottom-start"
        trigger="click"
        popper-class="v2-filter-popover">
        <div class="v2-filter-main-header">
            <div class="v2-filter-main-header">
                <div style="font-weight: bold;padding-bottom: 8px;">筛选</div>
            </div>
            <div class="v2-filter-main-body">
                <el-row
                    v-for="(item, index) in state.conditions"
                    :gutter="2"
                    style="margin-bottom: 4px;">
                    <el-col :span="8">
                        <el-select
                            v-model="item.field"
                            :teleported="false"
                            value-key="value"
                            style="width: 100%"
                            @change="($event: any) => handleFieldChange($event, index)">
                            <el-option
                                v-for="(_item, _index) in fields"
                                :key="_index"
                                :label="_item.label"
                                :value="_item">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        <el-select
                            v-model="item.operator"
                            :teleported="false"
                            style="width: 100%"
                            @change="handleChange">
                            <el-option
                                v-for="(_item, _index) in list"
                                :key="_index"
                                :label="_item.label"
                                :value="_item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="8">
                        <el-input-number v-if="item.field.ui === 'input-number'" v-model="item.value" controls-position="right" @input="handleChange"/>
                        <el-input v-else v-model="item.value" @input="handleChange"/>
                    </el-col>
                    <el-col :span="2">
                        <el-button text icon="Close"
                            @click="handleRemove(index)"
                            style="padding-left: 10px;padding-right: 10px;">
                        </el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="v2-filter-main-footer">
                <el-button text icon="Plus" type="primary"
                    @click="state.conditions.push({ field: '', operator: 'includes', value: '' })">
                    添加条件
                </el-button>
            </div>
        </div>
        <template #reference>
            <el-button text icon="Filter" :type="state.conditions && state.conditions.length ? 'primary' : 'default'">筛选</el-button>
        </template>
    </el-popover>
</template>

<script setup lang="ts">
import { PropType, reactive } from 'vue';
defineProps({
    fields: {
        type: Array as PropType<any[]>,
        default: () => []
    }
})

const list = [
    { label: '包含', value: 'includes' },
    { label: '等于', value: '===' },
    { label: '不等于', value: '!==' },
    { label: '大于', value: '>' },
    { label: '大于等于', value: '>=' },
    { label: '小于', value: '<' },
    { label: '小于等于', value: '<=' },
]
const state = reactive({
    conditions: [] as any[]
})
const handleFieldChange = (val: any, index: number) => {
    handleChange()
}
const handleRemove = (index: number) => {
    state.conditions.splice(index, 1)
    handleChange()
}

const emit = defineEmits(['change'])
const handleChange = () => {
    emit('change', state.conditions)
}
</script>

<style scoped lang="scss">
.headle {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
}
</style>

<style lang="scss">
.v2-filter-popover{
    padding: 10px !important;
    box-shadow: 2px 2px 8px rgba($color: #000000, $alpha: 0.2) !important;
    border: 1px solid #ddd !important;
    // .el-textarea__inner{
    //     padding: 5px 10px;
    // }
    .el-input__wrapper,
    .el-select__wrapper{
        padding-left: 9px;
        padding-right: 6px;
    }
    .el-button{
        padding: 6px;
    }
}
</style>